<template>
  <h1>App</h1>
  <p>{{ count }}</p>
  <p>{{ oddOrEven }}</p>
  <button @click="handleIncrement">increment</button>
  <button @click="handleDecrement">decrement</button>
</template>

<script lang="ts">
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
  name: "App",
  computed: {
    ...mapState({
      count: (state) => state.counter.count,
    }),
    ...mapGetters(["oddOrEven"]),
  },
  methods: {
    ...mapActions(["increment"]),
    ...mapMutations(["DECREMENT"]),
    handleIncrement() {
      this.increment(1);
    },
    handleDecrement() {
      this.DECREMENT(1);
    },
  },
};
</script>

<style scoped></style>
